<template>
	<view class="home-view">
	
		<wx-open-launch-weapp
		  v-show="false"
		  ref="myButton"
		  id="launch-btn"
		  appid="wx850d4fd5c640f9de"
		  path="pages/index/index"
		>
		  <script type="text/wxtag-template">
			<style>.btn { padding: 12px }</style>
			<button class="btn" id="btns">打开小程序</button>
		  </script>
		</wx-open-launch-weapp>
		
	</view>
</template>

<script>
	import appMixin from '@/mixins/app.js'
	import { getGoodHot,getWxConfigParams } from '@/api/shop.js'
	import { getChildrenVodList } from '@/api/course'
	export default {
		name: 'Home',
		mixins: [appMixin],
		data() {
			return {
				list: [],
				shop: null
			}
		},
		created() {
			/* #ifdef H5 */
				// this.skipSmallProgram()
				this.btnShow = false
			/*#endif*/
			
			/*#ifdef MP-WEIXIN*/
			this.btnShow = true
			/*#endif*/
		},
		methods: {
			courseClick(index) {
				const item = this.list[index]
				// console.log(item);
				this.$u.route({
					url: 'pages_base/common/player/player',
					params: {
						url: item.staticUrl,
						title: item.title,
						update: 'false'
					}
				})
			},
			getCourse() {
				const params = {
					pageNum: 0,
					pageSize: 6
				}
				const f = getChildrenVodList
				f(params).then(res => {
					console.log(res)
					this.list = res.data.content
				})
			},
			moreClick() {
				this.$u.route({
					url: '/pages_base/common/vod-list-page',
				})
			},
			goodClick() {
				let ticket = ''
				try {
					ticket = uni.getStorageSync('ticket');
				} catch (e) {}
				if (this.$u.test.isEmpty(ticket)) {
					this.$u.toast('token失效，请重新登录');
					return;
				}
				console.log(this.shopUrl)
				// #ifdef H5
				    window.location.href=`${this.shopUrl}/#/pages/goods/goods?id=${this.shop.id}&ticket=${ticket}`;
				// #endif

				// #ifdef APP-PLUS
					this.$u.route({
						url: '/pages_base/common/webview',
						params: {
							url: encodeURIComponent(`${this.shopUrl}/#/pages/goods/goods?id=${this.shop.id}&ticket=${ticket}`)
						}
					})
				// #endif
			},
			
			mallClick() {
				let ticket = ''
				try {
					ticket = uni.getStorageSync('ticket');
				} catch (e) {}
				if (this.$u.test.isEmpty(ticket)) {
					this.$u.toast('token失效，请重新登录');
					return;
				}
				
				// #ifdef H5
				    window.location.href=`${this.shopUrl}/#/?ticket=${ticket}`;
				// #endif
				
				// #ifdef APP-PLUS
					this.$u.route({
						url: '/pages_base/common/webview',
						params: {
							url: encodeURIComponent(`${this.shopUrl}/#/?ticket=${ticket}`)
						}
					})
				// #endif
			},
			
			formatCover(pic) {
				return `${this.shopUrl}/prod-api/file/getImgStream?idFile=${pic}`;
			},
			
			getShopGoods() {
				getGoodHot().then(res => {
					console.log(res);
					this.shop = res.data[0];
				})
			},
			async skipSmallProgram() {
				const { data : res } = await getWxConfigParams()
				wx.config({
				  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				  appId: res.appId, // 必填，公众号的唯一标识
				  timestamp: res.timestamp, // 必填，生成签名的时间戳
				  nonceStr: res.nonceStr, // 必填，生成签名的随机串
				  signature: res.signature, // 必填，签名
				  jsApiList: ['wx-open-launch-weapp', 'chooseImage', 'previewImage'], // 必填，需要使用的JS接口列表
				  openTagList:['wx-open-launch-weapp'], // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp','wx-open-launch-app']
				});
				wx.ready(function() {
				  //config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
				});
				wx.error(function(res) {
				  console.log('res',res);
				  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
				});
				this.$nextTick(() => {
					const button = this.$refs.myButton;
					if (button) {
					    button.click(); // 直接调用 click 方法，不建议这样用
					}
				})
				// document.getElementById('btns').click()
			}
		}
	}
</script>

<style lang="scss">
	.home-view{
		padding-left: $app-page-padding;
		padding-right: $app-page-padding;
		margin-bottom: $app-page-padding;
		
		.course-top{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 30rpx;
			
			.title{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 38rpx;
			}
			
			.more{
				font-size: 18rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 38rpx;
			}
		}
		
		.course-view{
			background-color: #FFFFFF;
			.course-bg{
				position: relative;
				
				.play-view{
					width: 115rpx;
					height: 43rpx;
					background: #AACD22;
					border-radius: 22rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					
					position: absolute;
					left: 0;
					bottom: -20rpx;
					
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 38rpx;
					
					.play-count{
						margin-left: 10rpx;
					}
				}
			}
			
			.course-name{
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 30rpx;
				margin-top: 24rpx;
				
				overflow:hidden; 
				text-overflow:ellipsis;
				display:-webkit-box; 
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2; 
			}
		}

		.mall-view{
			margin-top: 30rpx;
			
			.mall-info-view{
				margin-top: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				
				.mall-info{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					width: 100%;
					
					.name{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 30rpx;
					}
					
					.count{
						font-size: 18rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 30rpx;
					}
				}
				
				.action-view{
					display: flex;
					flex-direction: row;
					
					.item1{
						width: 50rpx;
						height: 50rpx;
						background: #DA473A;
						border: 1rpx solid #DA473A;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					
					.item2{
						width: 50rpx;
						height: 50rpx;
						background: #FFFFFF;
						border: 1rpx solid #DA473A;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>
